<template>
	<view style="height: 100%;position: relative;">
		<u-navbar :is-back="false" title="记录" title-size="33" title-color="#000000">
			<text slot="right" style="margin-right: 42rpx;" @tap='barRightTap'>筛选</text>
		</u-navbar>
		<u-mask :show="show" @click="show = false" :mask-click-able="false" style="margin-top: 44px;" z-index="90"></u-mask>
		<view class="choose-btn" v-if="show">
			<view class="btn-item" v-for="(item,index) in times" :key='index'  :class="{active:curentTime === index}" @tap='chooseTime(index)'>
				{{item}}
			</view>
		</view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" active-color='#F59328'
			 inactive-color="#666666" :bold='false' style="border-top: 10rpx solid #F4F5F9;" :active-item-style='activeStyle'></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 100%;">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="order-list" v-for="(item,index1) in orders" :key='index1'>
						<view class="list-top">
							<view class="order-left">
								<view class="left-top">13213356645234324</view>
								<view class="left-bottom">2020-02-01 12:11:33</view>
							</view>
							<view class="order-right">
								<u-button v-if="swiperCurrent === 0" type="warning" size="medium" shape="circle" @tap='goOrderInfo(item)'>未下单</u-button>
								<u-button v-if="swiperCurrent === 1" type="warning" size="medium" shape="circle" @tap='goOrderInfo(item)'>已返佣</u-button>
								<u-button v-if="swiperCurrent === 2" plain size="medium" shape="circle" @tap='goOrderInfo(item)'>已取消</u-button>
							</view>
						</view>
						<view class="list-bottom" v-if="swiperCurrent === 1">
							已返佣金 <text class="bottom-num">1,838,328.00</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待处理'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [1, 2, 3],
				activeStyle: {
					color: '#000000'
				},
				orders: [1, 2, 3],
				show: false, //筛选遮罩
				curentTime:0,
				times:['今天','昨天','最近七天','最近30天']
			};
		},
		methods: {
			barRightTap() { // 头部筛选
				this.show = true
			},
			stope(e){
				e.stopPropagation()
			},
			chooseTime(index){
				this.curentTime = index
				this.show =false
			},	
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			// 查看订单详情
			goOrderInfo() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/shopping/order/order',
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.choose-btn {
		position: relative;
		z-index: 100;
		padding: 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #FFFFFF;

		.btn-item {
			width: 45%;
			height: 72rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			color: #000000;
			line-height: 72rpx;
			text-align: center;
			background-color: #E9E9E9;
			border-radius: 8rpx;

			&.active {
				background-color: #FFEEDC;
				color: #F59328;
				background: url(../../static/shop/gwa.png) no-repeat right bottom;
			}
		}
	}

	.order-list {
		margin-top: 10rpx;
		padding: 14rpx 45rpx;
		background-color: #FFFFFF;

		.list-top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-top {
				font-size: 36rpx;
				color: #000000;
				line-height: 50rpx;
			}

			.left-bottom {
				margin-top: 8rpx;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
		}

		.list-bottom {
			display: flex;
			justify-content: flex-end;
			padding-top: 12rpx;
			border-top: 1px solid #EEEEEE;
			color: #333333;
			font-size: 24rpx;
			line-height: 40rpx;

			.bottom-num {
				font-size: 32rpx;
				color: #FE004F;
			}
		}
	}
</style>
